<template>

	<view class="product-option" v-bind:class="{'active':panel_show}">

		<view class="picker-goods">
			<image mode="widthFix" class="goods-img" v-bind:src="product_image" alt=""></image>

			<view v-show="option_panel.goto!='buy_pindan'" class="price">￥{{matched_option?matched_option.price:price}}</view>
			<view v-show="option_panel.goto=='buy_pindan'" class="price">￥{{matched_option?matched_option.price_pindan:price}}</view>
			<view class="stock" v-show="matched_option && matched_option.stock==-1">库存充足</view>
			<view class="stock" v-show="matched_option && matched_option.stock!=-1">库存{{matched_option?matched_option.stock:''}}件</view>
			<view class="picked-option">
				<view v-show="!matched_option">未选择</view>
				<view v-show="matched_option">已选择：{{matched_option?matched_option.attr:''}}</view>
			</view>
		</view>

		<scroll-view class="option-field" scroll-y="true">
			<view class="option-list">
				<view class="spec"  v-for="spec,i in specification" >
					<view class="spec-name">{{spec.name}}</view>
					<view class="spec-values">
						<block v-for="value_item,index in spec.values"  >
							<view class="value-item"
							v-bind:class="{'active':spec_checked[spec.name]==value_item.name}"
							  v-on:click="check_spec_value(spec, value_item)">
								{{value_item.name}}
							</view>
						</block>

					</view>
				</view>

			</view>
			<view class="pick-number">
				<view class="key">数量</view>
				<view class="cart-quantity-wrapper">
					<view class="price-number-panel">
						<view class="number-panel">
							<view class="jian" 
							v-on:click="change_num(item,'-')">-</view>
							<input class="number" v-model="goods_num" type="text" />
							<view class="jia"  
							v-on:click="change_num(item,'+')">+</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>


		<view class="btn-check">
			<view class="done" v-on:click="done">确定</view>
			
		</view>
	</view>

</template>

<script>
	const appInstance = getApp();
	export default {

		props: ['product_id', 'spec_object', 'price', 'option_panel', 'product_image', 'specification' ],
		data: function() {

			return {

				panel_show: 0,
				spec_arr: [],

				spec_checked: {},
				matched_option: null,
				goods_num: 1,
			}
		},


		methods: {

			change_num: function(product, type ) {

				var t = this;


				// var dataset = event.target.dataset;
				// var product = dataset.product;

				if (type == '-') {
					this.goods_num--;
				} else {
					this.goods_num++;
				}
				this.goods_num = this.goods_num <= 0 ? 1 : this.goods_num;

				// todo 刷新数据
				// this.setData({
				// 	goods_num: this.data.goods_num
				// });
			},

			check_spec_value: function(spec, value) {

				// var dataset = e.target.dataset;
				// var spec = dataset.spec;
				// var value = dataset.value;

				if (this.spec_checked[spec.name] == value.name) {
					this.$set(this.spec_checked, spec.name, '');
					// this.spec_checked[spec.name] = '';
				} else {
					// this.spec_checked[spec.name] = value.name;
					this.$set(this.spec_checked, spec.name, value.name);
				}

				this.match_option();

			},

			match_option: function() {

				var t = this;
				// t.setData({
				// 	matched_option: null
				// });
				t.matched_option = null;
				this.spec_object.forEach(function(item) {

					var attr_arr = item.attr.split(',');
					var matched = 1;
					attr_arr.forEach(function(attr) {

						var key = attr.split(':')[0];
						var v = attr.split(':')[1];
						if (t.spec_checked[key] != v) {
							matched = 0;
						}
					});

					if (matched) {
						t.matched_option = item;

						// t.setData({
						// 	matched_option: item
						// });

					}

				});

			},


			done: function(e) {

				var t = this;

				this.match_option();

				if (!this.matched_option) {

					uni.showToast({
						title: '请选中规格',
						icon: 'success',
						duration: 600
					});
					return;
				}

				if (this.option_panel.goto == 'add_to_cart') {
					this.add_to_cart()
				}
				if (this.option_panel.goto == 'buy') {
					this.buy()
				}
				if (this.option_panel.goto == 'buy_pindan') {
					this.buy()
				}

			},

			add_to_cart: function() {


				var url = '&r=cart.add';

				var data = {
					product_id: this.product_id,
					option_id: this.matched_option.id,
					number: this.goods_num,
				};
				var t = this;
				appInstance.globalData.request(url, data, 'GET', function(res) {

					if (!res.data.status) {
						uni.showToast({
							title: '购物车添加成功',
							icon: 'success',
							duration: 800
						});

						// t.setData({
						// 	show: 0
						// });
						t.panel_show = 0;
						//todo 更新购物车 状态
						// t.cartStatus();
						var myEventDetail = {} // detail对象，提供给事件监听函数
						var myEventOption = {} // 触发事件的选项
						// t.triggerEvent('poEvent', myEventDetail, myEventDetail);
						t.$emit('poEvent', myEventDetail, myEventDetail);
					}



				});

			},

			buy: function() {console.log('buy~');

				var params = 'product_id=' + this.product_id;
				if (this.matched_option) {
					params += '&option_id=' + this.matched_option.id;
				}
				params += '&product_num=' + this.goods_num;
				if (this.option_panel.goto == 'buy_pindan') {
					params += '&is_pindan=1&pindan_order=' + this.option_panel.pindan_order;

				}
				uni.navigateTo({
					url: '/sm_shop/pages/checkout/checkout?' + params
				});
			}

		},
		
		onLoad:function(){
			
			// console.log( 'goods option created ');
			// console.log( this.option_panel );
			// console.log( this.price );
			// console.log( this.spec_object );
			// console.log( 'goods option created--' );
		},

		watch: {

			show: function(after, before) {

				console.log(after);
				this.panel_show = after;
				console.log(this.panel_show);
			},

			'option_panel.notice': function(after, before) {

				console.log(after, before);
				this.panel_show = after > before ? 1 : 0;
				console.log(this.panel_show);

			}
		}
	}
</script>

<style lang="less">
	.product-option {


		position: fixed;
		z-index: 101;


		width: 100%;
		height: 800rpx;

		padding: 20px 20px;

		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;

		box-shadow: 5px 0px 3px #aaa;

		bottom: -800px;
		transition: bottom 0.4s;

		&.active {

			bottom: 0;

		}

		.picker-goods {

			img,
			.goods-img {

				float: left;
				width: 160rpx;
				height: auto;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.price {

				font-size: 20px;
				color: #ff3c29;


			}

			.stock {

				font-size: 12px;
				color: #969696;
				//line-height:2;
				margin-top: 5px;
			}

			.picked-option {
				//line-height:2;
				//margin-top:10px;
			}

			&::after {

				content: "";
				clear: both;
				display: block;
			}

		}

		.option-field {
			overflow-y: auto;
			//height: 100%;
			height: 640rpx;
			margin-top: 20rpx;
		}

		.option-list {


			.spec {

				margin-bottom: 20px;

				.spec-name {
					margin-top: 10px;
					font-size: 14px;

				}

				.spec-values {

					margin-top: 10px;
					margin-bottom: 20px;

					.value-item {

						display: inline-block;

						//line-height:1.8;
						height: 22px;
						line-height: 22px;
						padding: 0 20px;
						margin-right: 10px;

						border: solid 1px #969696;
						border-radius: 20px;

						&.active {

							border-color: #ff3c29;
							color: #ff3c29;

						}
					}

				}


			}

		}

		.pick-number {

			margin-bottom: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.key {}

			.cart-quantity-wrapper {

				width: 390rpx;

				.price-number-panel {
					position: static;
				}

			}


		}

		.btn-check {

			width: 100%;
			padding: 0 20px;
			position: absolute;
			left: 0;
			bottom: 10px;

			.done {
				display: block;
				background: linear-gradient(90deg, #ff3c29, #ff6f29);
				border-radius: 20px;

				width: 100%;
				height: 40px;
				line-height: 40px;
				color: #fff;
				text-align: center;
				font-size: 14px;

			}
		}

	}
</style>
